<ul class="am-tree" id="firstTree{$unique_id}">
    <li class="am-tree-branch am-hide" data-template="treebranch">
        <div class="am-tree-branch-header">
            <button class="am-tree-branch-name">
                <span class="am-tree-icon am-tree-icon-folder"></span>
                <span class="am-tree-label"></span>
            </button>
        </div>
        <ul class="am-tree-branch-children"></ul>
        <div class="am-tree-loader"><span class="am-icon-spin am-icon-spinner"></span></div>
    </li>
    <li class="am-tree-item am-hide" data-template="treeitem">
        <button class="am-tree-item-name">
            <span class="am-tree-icon am-tree-icon-item"></span>
            <span class="am-tree-label"></span>
        </button>
    </li>
</ul>
<script>
    // demo 1
    // var data = [
    //     {
    //         title: '苹果公司',
    //         type: 'folder',
    //         children: [
    //             {
    //                 title: 'iPhone',
    //                 type: 'item'
    //             },
    //             {
    //                 title: 'iMac',
    //                 type: 'item'
    //             },
    //             {
    //                 title: 'MacBook Pro',
    //                 type: 'item'
    //             }
    //         ]
    //     },
    //     {
    //         title: '微软公司',
    //         type: 'folder',
    //         children:[]
    //     },
    //     {
    //         title: 'GitHub',
    //         type: 'item',
    //         attr: {
    //             icon: 'am-icon-github'
    //         }
    //     }
    // ];
    var data = eval('{$catelog|raw}');

    $('#firstTree{$unique_id}').tree({
        dataSource: function(options, callback) {
            // 模拟异步加载
            // setTimeout(function() {
                callback({data: options.children || data});
            // }, 400);
        },
        multiSelect: false,
        cacheItems: true,
        folderSelect: false
    });
</script>